<template>
<div>
<el-table
    :data="obj.flow"
    border
    style="width: 100%">
    <el-table-column
      prop="company_name"
      label="网格名称"
      width="200">
    </el-table-column>
    <el-table-column
      prop="name"
      label="处理人"
      width="100">
    </el-table-column>
    
    <!-- <el-table-column
      label="操作类型"
      width="100">
      <template slot-scope="scope">
      	{{handle_type_label[parseInt(scope.row.handle_type)]}}
      </template>
    </el-table-column> -->

     <el-table-column
      label="意见"
      >
      <template slot-scope="scope">
      	{{scope.row.paramsobj.content}}
      </template>
    </el-table-column>

    <el-table-column
      label="状态"
      width="80">
      <template slot-scope="scope">
      	{{status_label[parseInt(scope.row.status)]}}
      </template>
    </el-table-column> 

    <el-table-column
      prop="handle_time"
      label="处理时间"
      width="200">
    </el-table-column>
    
    <el-table-column
      label="是否督办"
      width="100">
      <template slot-scope="scope">
      	{{is_supervise_label[parseInt(scope.row.is_supervise)]}}
      </template>
    </el-table-column>


    <el-table-column
      label="操作"
      width="100">
      	<template slot-scope="scope">
      		<el-button type="success" size="mini" 
      		icon="el-icon-view" circle
      		@click="edit(scope.row)">
      		</el-button>
      		<!-- <el-button type="danger" size="mini" 
      		icon="el-icon-delete" circle
      		@click="del(scope.row)">
      		</el-button> -->
      	</template>
    </el-table-column>
  </el-table>


<el-dialog
  title="流程详情"
  :visible.sync="dialogVisible"
  append-to-body
  width="60%">

  	<el-form ref="form" :model="current" label-width="180px">

  		<el-form-item label="网格名：">
  			{{current.company_name}}
  		</el-form-item>

  		<el-form-item label="处理人：">
  			{{current.name}}
  		</el-form-item>

  		<el-form-item label="处理状态：">
  			{{status_label[parseInt(current.status)]}}
  		</el-form-item>

  		<el-form-item label="处理时间：">
  			{{current.handle_time}}
  		</el-form-item>

		<el-form-item
		 v-for="(item, index) in current.params" :key="index"
		 :label="item.name + '：'"  >
		 	<span v-if="item.type == 'text' || item.type == 'textarea'">
		 		{{item.value}}
		 	</span>
		 	<img v-if="item.type == 'img'" :src="'/gridfile/' + item.value" 
		 	width="200" height="200" class="pointer mr10" 
		 	@click="showImg('/gridfile/' + item.value)">
		 	<video-player  
			v-if="item.type == 'video'"
			class="video-player-box"
                 ref="videoPlayer"
                 :options="{
					muted: true,
					language: 'zn',
					playbackRates: [0.7, 1.0, 1.5, 2.0],
					sources: [{
						type: 'video/mp4',
						src: '/gridfile/' + item.value
					}],
				 }"
                 :playsinline="true"
                 customEventName="customstatechangedeventname"
            >
  			</video-player>
		</el-form-item>


		<el-dialog :visible.sync="imgDialogVisible" append-to-body>
		  <img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>

		<el-form-item v-if="current.is_supervise == '1'" label="督办内容："  >
			<el-input type="textarea" v-model="current.supervise_content" style="width:400px;"></el-input>
		</el-form-item>

	</el-form>

  <span v-if="current.is_supervise == '1'" slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">保 存</el-button>
  </span>
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'eventFlow',
	
	data () {
		return {
		  	status_label : ['处理中', '完成'],
		  	is_supervise_label : ['否', '是'],
		  	handle_type_label : ['', '分发', '上报'],

		  	dialogVisible : false,

		  	current : {},

		  	imgDialogVisible : false,
			dialogImageUrl : '',
		}
	},

	props : {
		obj: {
			type: Object,
			default () {
				return {}
			},
		}
	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		edit (item) {
			this.$http({
				fun : 'flowInfo',
				id : item.id,
				cb : res => {
					console.log('flowInfo');
					console.log(res);

					if(res.params == undefined){
						res.params = [];
					}

					this.current = {
						...res,
						id : item.id,
					};
					this.dialogVisible = true;
				}
			});
		},

		save () {

			console.log(this.current);

			this.$http({
				fun : 'updatesupervise',
				id : this.current.id,
				supervise_content : this.current.supervise_content,
				cb : res => {
					console.log(res);
					this.$message.success('操作成功');
					this.current = {};
					this.dialogVisible = false;
				}
			});
		},

		showImg (url) {

			this.dialogImageUrl = url;
			this.imgDialogVisible = true;
		},
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>

</style>
